<template>
  <view class="ai-tag" :class="color && 'ai-tag--' + color">{{text}}</view>
</template>

<script>
  /**
   * 标签
   * @description 通用标签
   * @property {String} color = [primary|success|danger|warning] 标签颜色
   * 	@value primary 主要颜色
   * 	@value success 成功颜色
   * 	@value danger 错误颜色
   *  @value warning 警告颜色
   * @property {String} text 规划标题
   * @property {Boolean} fill 是否实心，默认false
   */
  export default {
    name: "ai-tag",
    props: {
      color: String,
      text: String
    },
    data() {
      return {

      };
    }
  }
</script>

<style lang="scss">
  @import "@/styles/_var.scss";

  .ai-tag {
    display: inline-block;
    position: relative;
    margin: $tag-margin;
    padding: $tag-padding;
    border: 1px solid var(--brand-1);
    border-radius: $tag-border-radius;
    color: $tag-color;
    font-size: $tag-font-size;
    line-height: 1.25;
    white-space: nowrap;
    
    &--primary {
      border-color: transparent;
      color: var(--orange);

      &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: -1px;
        border-radius: inherit;
        background: currentColor;
        opacity: 0.14;
      }
    }

    &--success {
      border-color: var(--green);
      background: var(--green);
      color: #fff;
    }

    &--danger {
      border-color: var(--red);
      background: var(--red);
      color: #fff;
    }

    &--warning {
      border-color: var(--orange);
      background: var(--orange);
      color: #fff;
    }
  }
</style>